<template>
  <div>
    <el-dialog
        :visible.sync="isVisible"
        width="1000px"
        :close-on-click-modal="false"
        @open="load"
        @close="handleClose">
      <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
        <div style="padding:15px 20px;">{{ title }}</div>
      </div>
      <div class="config_eth_ctp">
        <!--    <el-header style="background-color: #e3e8e7;margin-bottom: 3px">Eth CTP 配置</el-header>-->
        <el-form :model="ethCtpPac" ref="ruleForm" label-width="100px" class="config_form">
          <el-tabs :tab-position="tabPosition">
            <el-tab-pane label="Vlan">
              <el-divider><span style="color: #409EFF"><b>Vlan</b></span>
              </el-divider>
              <Vlan/>
            </el-tab-pane>
            <el-tab-pane label="clientVLAN">
              <el-divider><span style="color: #409EFF"><b>client vlan</b></span>
              </el-divider>
              <Vlan/>
            </el-tab-pane>
            <el-tab-pane label="OAM" style="width: 800px">
              <EthOAM/>
              <EthOAMState/>
            </el-tab-pane>
            <!--  <el-tab-pane label="ETH性能">
                <EthPerformance/>
              </el-tab-pane>-->
            <!--
            <el-form-item>
                        <el-image
                            style="width: 20px; height: 25px;"
                            :src="require('@/assets/union_rule_font.jpg')"
                            :preview-src-list="[require('@/assets/union/ethPtpPac.jpg')]">
                        </el-image>
                        <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                      </el-form-item>
                    </el-tab-pane>-->
          </el-tabs>


        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {xc_vlanPriority, xc_accessAction} from "@/assets/config/XcPac";
import Vlan from "@/components/dispose/ctp/eth/Vlan";
import EthOAM from "@/components/dispose/ctp/eth/EthOAM";
import EthOAMState from "@/components/dispose/ctp/eth/EthOAMState";

export default {
  name: "EthCtpPop",
  components: {EthOAMState, EthOAM, Vlan},
  data() {
    return {
      tabPosition: 'left',
      vlanId: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      xc_vlanPriority,
      xc_accessAction,
      ethCtpPac: {
        vlanSpec: {
          vlanType: '',
          vlanId: [],
          vlanPriority: '',
          accessAction: ''
        },
        clientVlanSpec: {
          vlanType: '',
          vlanId: [],
          vlanPriority: '',
          accessAction: ''
        }
      },
      isVisible: false,
    }
  },
  props: ['visible', 'title', 'node', 'ptp'],

  methods: {
    load() {
      this.isVisible = this.visible;
    },

    handleClose() {
      this.isVisible = false;
      this.$emit('update:message', this.isVisible)
      // 注意不能直接修改父组件的传值 this.cmessage，只能传值给父组件，在父组件中修改原始的message
    }
  },
  mounted() {
    this.$bus.$on("visible:eth:dialog",(data)=>{
      this.isVisible = data;
    })
    this.$nextTick(function () {
      // this.isVisible = this.visible;
    })
  },
  watch: {
    isVisible: {
      immediate: true, //初始化时让handler调用一下
      //handler什么时候调用？当isHot发生改变时。
      handler(newValue, oldValue) {
        console.log('值修改了')
        console.log('新值', newValue)
        console.log('旧值', oldValue)
      }
    }
  }

}
</script>

<style scoped>
.config_eth_ctp {
  width: 100%;
  height: auto;
}


</style>